<template>
  <div class="language">
    <header>
      <span @click="$back()">
        <el-icon color="#fff" size="20">
          <ArrowLeftBold />
        </el-icon>
      </span>
      <strong>{{ $t("language.home.language") }}</strong>
      <span @click="$openPage('/kefu')">
        <NuxtImg src="/img/kefu.png" alt="" />
      </span>
    </header>
    <main>
      <AppSkeleton :loading="loading">
        <template #ske>
          <div style="
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            align-items: center;
            padding:0 15px;
          ">
            <div v-for="(item, index) in coutry" :key="index" style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              height: 60px;
            ">
              <el-skeleton-item variant="image" style="width: 36px; height: 36px; margin-right: 15px" />
              <el-skeleton-item variant="text" style="flex: 1; height: 36px" />
            </div>
          </div>
        </template>
        <template #main>
          <ul>
            <li v-for="(item, index) in coutry" :key="index" @click="changeLanguage(item)">
              <NuxtImg :src="item.img" alt="" /><span>{{
        item.name
      }}</span>
            </li>
          </ul>
        </template>
      </AppSkeleton>
    </main>

    <div class="dialog">
      <el-dialog width="90%" v-model="initVisible2" :show-close="false">
        <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
          <strong></strong>
          <h4>
            {{ $t("language.dialog.title") }}
          </h4>
          <span @click="initVisible2 = false">
            <el-icon color="#b5b6c8" size="16">
              <CloseBold />
            </el-icon>
          </span>
        </div>
        <div class="dialogmain">
          <p class="note">{{ $t("language.dialog.text") }}</p>
          <el-button class="confirm" @click="checkout">{{
        $t("language.dialog.btn")
            }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">

import { reactive, shallowReactive, ref, nextTick } from "vue";
import { useI18n } from "vue-i18n";
import { ArrowLeftBold, CloseBold } from '@element-plus/icons-vue'
const store = useStore()
const coutry = reactive<{
  img: string,
  name: string,
  lang: string,
}[]>([
  {
    img: "/img/guoqi_01.png",
    name: "English",
    lang: "en",
  },
  {
    img: "/img/guoqi_02.png",
    name: "中文(简)",
    lang: "English",
  },
  {
    img: "/img/guoqi_03.png",
    name: "Portugues do Brasil",
    lang: "pt",
  },
  {
    img: "/img/guoqi_04.png",
    name: "Indonesia",
    lang: "id",
  },
  {
    img: "/img/guoqi_05.png",
    name: "日本語",
    lang: "ja",
  },
  {
    img: "/img/guoqi_06.png",
    name: "한국어",
    lang: "ko",
  },
  {
    img: "/img/guoqi_07.png",
    name: "ภาษาไทย",
    lang: "th",
  },
  {
    img: "/img/guoqi_08.png",
    name: "Tiếng Việt",
    lang: "vi",
  },
]);
const { locale } = useI18n();
let lang = shallowReactive<any>({
  img: "",
  name: "",
  lang: "",
},);
//dom更新后执行
nextTick(() => {
  // loading.value = false;
  let time = setInterval(() => {
    loading.value = false;
    clearInterval(time);
  }, 500);
});
const changeLanguage = (item: any) => {
  for (let key in item) {
    lang[key] = item[key];
  }

  initVisible2.value = true;


};
let loading = shallowRef<boolean>(true);
let checkout = () => {
  locale.value = lang.lang;
  store.$patch({ lang })
  initVisible2.value = false
  // router.push("/home");
  $openPage("/")
};
let initVisible2 = shallowRef<boolean>(false);
</script>
<style lang="scss">
.dialog {
  #bigcloser {
    width: 100%;
    @include flex(row, flex-end, center);

    strong {
      display: block;
      width: 28px;
      height: 28px;
    }

    h4 {
      flex: 1;
      font-size: 18px;
      color: #fff;
      text-align: center;
    }

    span {
      display: block;
      width: 28px;
      height: 28px;
      @include flex(row, center, center);
      border: 2px solid #b5b6c8;
      border-radius: 16px;
      margin-right: -7px;
      cursor: pointer;
    }
  }

  .el-dialog {
    padding: 15px !important;
    background-color: rgb(50, 53, 62) !important;
    border-radius: 10px !important;
  }

  .dialogmain {
    .confirm {
      background: #0a906c;
      border: none;
      color: #fff;
      display: block;
      width: 40%;
      height: 40px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 10px auto 20px;
    }

    .note {
      font-size: 14px;
      color: #748494;
      line-height: 23px;
      margin-top: 10px;
      text-align: center;
    }
  }

  .el-dialog__header {
    padding: 0 !important;
  }
}
</style>
<style scoped lang="scss">
.language {
  width: 100%;

  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;

    span {
      display: block;
      height: 28px;
      width: 28px;
      line-height: 28px;
      @include flex(row, flex-start, center);
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  main {
    width: 100%;
    padding-top: 45px;
    background-color: rgb(26, 26, 26);
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    ul {
      padding: 0px 0px 90px;
      width: 100%;
      background-color: rgb(26, 26, 26);
      overflow-y: scroll;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      li {
        width: 100%;
        height: 60px;
        cursor: pointer;
        @include flex(row, flex-start, center);
        border-bottom: 1px solid rgb(95, 92, 92);
        padding: 16px 22px;

        img {
          width: 30px;
        }

        span {
          color: #fff;
          font-size: 16px;
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
